<template>
  <div class="app-main-content" style="overflow: scroll;">
    <el-form ref="dataForm" :model="dataForm" label-width="120px" @keyup.enter.native="dataFormSubmit()">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>项目配置：</span>
            </div>
            <el-form-item :rules="[{required: true,message: '项目分组'}]"
                          label="项目分组" prop="groupName">
              <el-input v-model="dataForm.groupName"></el-input>
            </el-form-item>
            <el-form-item :rules="[{required: true,message: '项目名称'}]"
                          label="项目名称" prop="project">
              <el-input v-model="dataForm.project"></el-input>
            </el-form-item>
            <el-form-item :rules="[{required: true,message: '项目作者'}]"
                          label="项目作者" prop="author">
              <el-input v-model="dataForm.author"></el-input>
            </el-form-item>
            <el-form-item :rules="[{required: true,message: 'copyright'}]"
                          label="copyright" prop="copyright">
              <el-input v-model="dataForm.copyright"></el-input>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>mysql数据库连接信息：</span>
            </div>
            <el-form-item :rules="[{required: true,message: '数据库地址不能为空'}]"
                          label="数据库地址" prop="dbUrl">
              <el-input v-model="dataForm.dbUrl"></el-input>
            </el-form-item>
            <el-form-item :rules="[{required: true,message: '数据库端口不能为空'}]"
                          label="数据库端口" prop="dbPort">
              <el-input v-model="dataForm.dbPort"></el-input>
            </el-form-item>
            <el-form-item :rules="[{required: true,message: '数据库用户名不能为空'}]"
                          label="数据库用户名" prop="dbUsername">
              <el-input v-model="dataForm.dbUsername"></el-input>
            </el-form-item>
            <el-form-item :rules="[{required: true,message: '数据库密码不能为空'}]"
                          label="数据库密码" prop="dbPassword">
              <el-input v-model="dataForm.dbPassword"></el-input>
            </el-form-item>

            <el-form-item :rules="[{required: true,message: '数据库名不能为空'}]"
                          label="数据库名" prop="dbName">
              <el-input v-model="dataForm.dbName"></el-input>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>

    </el-form>
    <p style="text-align:center">
      <el-button type="primary" style="width: 200px;" @click="dataFormSubmit()">生成项目</el-button>
    </p>
  </div>
</template>
<script>
    import * as API from '@/api/gen/project'

    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    id: 0,
                    project: "jeedcp",
                    groupName: "com.jeedcp",
                    copyright: "www.jeedcp.com",
                    author: "caochaofeng",
                    dbUrl: "127.0.0.1",
                    dbPort: "3306",
                    dbName: "jeedcp",
                    dbUsername: "root",
                    dbPassword: "123456"
                }
            }
        },
        methods: {
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        API.genCode(this.dataForm).then((data) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '生成项目成功',
                                    type: 'success',
                                    duration: 1500
                                })
                            } else {
                                this.$message.error(data.msg)
                            }
                        })
                    }
                })
            }
        }
    }
</script>
